<!-- 库存销量分析 -->
<template>
  <div class="com-container">
    <div id="com-chart" ref="stock_ref"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      chartInstance: null,
      allData: [
        {
          name: "2018-09",
          children: [
            {
              name: "吃晚饭",
              value: 8,
            },
            {
              name: "吃下午茶",
              value: 6,
            },
            {
              name: "吃夜宵",
              value: 6,
            },
            {
              name: "吃早餐",
              value: 5,
            },
            {
              name: "吃早午饭",
              value: 7,
            },
            {
              name: "吃中餐",
              value: 29,
            },
            {
              name: "借阅",
              value: 1,
            },
            {
              name: "进入图书馆",
              value: 1,
            },
            {
              name: "日常百货消费",
              value: 6,
            },
            {
              name: "上课",
              value: 99,
            },
            {
              name: "事务办理",
              value: 15,
            },
            {
              name: "自习或科研",
              value: 611,
            },
            {
              name: "休息",
              value: 255,
            },
          ],
        },
        {
          name: "2018-10",
          children: [
            {
              name: "吃晚饭",
              value: 5,
            },
            {
              name: "吃下午茶",
              value: 5,
            },
            {
              name: "吃夜宵",
              value: 8,
            },
            {
              name: "吃早餐",
              value: 4,
            },
            {
              name: "吃早午饭",
              value: 4,
            },
            {
              name: "吃中餐",
              value: 13,
            },
            {
              name: "借阅",
              value: 4,
            },
            {
              name: "进入图书馆",
              value: 2,
            },
            {
              name: "日常百货消费",
              value: 6,
            },
            {
              name: "上课",
              value: 36,
            },
            {
              name: "事务办理",
              value: 11,
            },
            {
              name: "自习或科研",
              value: 402,
            },
            {
              name: "休息",
              value: 108,
            },
          ],
        },
        {
          name: "2018-11",
          children: [
            {
              name: "吃晚饭",
              value: 8,
            },
            {
              name: "吃下午茶",
              value: 1,
            },
            {
              name: "吃夜宵",
              value: 4,
            },
            {
              name: "吃早餐",
              value: 6,
            },
            {
              name: "吃早午饭",
              value: 4,
            },
            {
              name: "吃中餐",
              value: 21,
            },
            {
              name: "借阅",
              value: 8,
            },
            {
              name: "进入图书馆",
              value: 6,
            },
            {
              name: "日常百货消费",
              value: 6,
            },
            {
              name: "上课",
              value: 44,
            },
            {
              name: "事务办理",
              value: 5,
            },
            {
              name: "自习或科研",
              value: 433,
            },
            {
              name: "休息",
              value: 170,
            },
          ],
        },
        {
          name: "2018-12",
          children: [
            {
              name: "吃晚饭",
              value: 11,
            },
            {
              name: "吃下午茶",
              value: 6,
            },
            {
              name: "吃夜宵",
              value: 5,
            },
            {
              name: "吃早餐",
              value: 2,
            },
            {
              name: "吃早午饭",
              value: 10,
            },
            {
              name: "吃中餐",
              value: 12,
            },
            {
              name: "借阅",
              value: 6,
            },
            {
              name: "进入图书馆",
              value: 5,
            },
            {
              name: "日常百货消费",
              value: 4,
            },
            {
              name: "上课",
              value: 29,
            },
            {
              name: "事务办理",
              value: 3,
            },
            {
              name: "自习或科研",
              value: 432,
            },
            {
              name: "休息",
              value: 167,
            },
          ],
        },
        {
          name: "2019-01",
          children: [
            {
              name: "吃晚饭",
              value: 12,
            },
            {
              name: "吃下午茶",
              value: 0,
            },
            {
              name: "吃夜宵",
              value: 2,
            },
            {
              name: "吃早餐",
              value: 13,
            },
            {
              name: "吃早午饭",
              value: 5,
            },
            {
              name: "吃中餐",
              value: 12,
            },
            {
              name: "借阅",
              value: 0,
            },
            {
              name: "进入图书馆",
              value: 8,
            },
            {
              name: "日常百货消费",
              value: 3,
            },
            {
              name: "上课",
              value: 99,
            },
            {
              name: "事务办理",
              value: 1,
            },
            {
              name: "自习或科研",
              value: 390,
            },
            {
              name: "休息",
              value: 200,
            },
          ],
        },
      ],
    };
  },
  mounted() {
    this.initChart();
    // this.getData()
    // window.addEventListener("resize", this.screenAdapter);
    // this.screenAdapter();
  },
  methods: {
    initChart() {
      var chartDom = document.getElementById("com-chart");
      this.chartInstance = echarts.init(chartDom);
      const initOption = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          left: 18,
          top: "12%",
          icon: "circle",
        },
        title: {
          text: "▎月活动",
          left: 20,
          top: 20,
        },
        label: {
          position: "center",
        },
      };
      this.chartInstance.setOption(initOption);
      const centerArr = [
        ["18%", "48%"],
        ["50%", "48%"],
        ["82%", "48%"],
        ["34%", "82%"],
        ["66%", "82%"],
      ];
      const colorArr = [
        ["#4FF778", "#0BA82C"],
        ["#E5DD45", "#E8B11C"],
        ["#E8821C", "#E55445"],
        ["#5052EE", "#AB6EE5"],
        ["#23E5E5", "#2E72BF"],
      ];
      // 处理图表需要的数据
      const seriesArr = this.allData.map((item, index) => {
        return {
          type: "pie",
          center: centerArr[index],
          hoverAnimation: false, // 关闭鼠标移入到饼图时的动画效果
          labelLine: {
            show: false, // 隐藏指示线
          },
          label: {
            show: false,
            position: "center",
            color: colorArr[index][0],
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "40",
            },
          },
          data: item.children,
        };
      });
      const dataOption = {
        series: seriesArr,
      };
      this.chartInstance.setOption(dataOption);
 
      const titleFontSize = (this.$refs.stock_ref.offsetWidth / 100) * 3.6;
      const innerRadius = titleFontSize * 3;
      const outterRadius = innerRadius * 1.3;
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
          },
        },
        series: [
          {
            type: "pie",
            radius: [outterRadius, innerRadius],
            label: {
              fontSize: titleFontSize / 2,
            },
          },
          {
            type: "pie",
            radius: [outterRadius, innerRadius],
            label: {
              fontSize: titleFontSize / 2,
            },
          },
          {
            type: "pie",
            radius: [outterRadius, innerRadius],
            label: {
              fontSize: titleFontSize / 2,
            },
          },
          {
            type: "pie",
            radius: [outterRadius, innerRadius],
            label: {
              fontSize: titleFontSize / 2,
            },
          },
          {
            type: "pie",
            radius: [outterRadius, innerRadius],
            label: {
              fontSize: titleFontSize / 2,
            },
          },
        ],
      };
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
  },
};
</script>

<style scoped>
div {
  color: rgb(209, 168, 168);
}
.com-container {
  width: 500px;
  height:  500px;
  overflow: hidden;
}

#com-chart {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

canvas {
  border-radius: 20px;
}

.com-container {
  position: relative;
}

</style>
